<%@ Page Title="" Language="C#" MasterPageFile="~/PropertyInfo.master" AutoEventWireup="true" CodeFile="Maps.aspx.cs" Inherits="Property_Info_Maps" %>
<%@ MasterType VirtualPath="~/PropertyInfo.master" %>
<asp:Content ID="ContentHeader" runat="server" ContentPlaceHolderID="HeaderContentPlaceHolder">
    <title>Google Maps JavaScript API Example: Simple Map</title>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="SidebarContentPlaceHolder" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server">
    <link href="http://code.google.com/css/base-200606.css" rel="stylesheet" type="text/css" />
    <link href="../css/solutions.css" rel="stylesheet" type="text/css" />
    <!-- Load the Google Maps API -->

    <link href="http://www.google.com/uds/css/gsearch.cs" rel="stylesheet" type="text/css" />
    <!-- Load the Map Search Control -->
    <link href="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css" rel="stylesheet"
        type="text/css" />

    <script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js" type="text/javascript"></script>

    <script src="https://ssl.google-analytics.com/urchin.js" type="text/javascript"></script>

    <script type="text/javascript">
        _uacct = "UA-18071-1";
        _uanchor = 1;
        urchinTracker();
    </script>

    <style type="text/css">
        /* Mandatory setting of right hand Sample Area */
        div.right-sample
        {
            width: 500px;
        }
        #search_map
        {
            width: 500px;
        }
        /* Idle and Active Maps are the same size */
        #search_map .gsmsc-idleMapDiv, #search_map .gsmsc-mapDiv
        {
            height: 300px;
        }
        div.hotspot
        {
            display: inline;
            font-size: 100%;
            font-weight: normal;
            color: #0000cc;
            text-decoration: underline;
            cursor: pointer;
            line-height: 1.8em;
        }
        div.hotspot-sep
        {
            display: inline;
            font-size: 100%;
            font-weight: normal;
            line-height: 1.8em;
        }
        h3.hotspot-header
        {
            font-size: 100%;
            margin-top: .5em;
            margin-bottom: .25em;
        }
    </style>
    <div style="width:93%;">
        <asp:HiddenField ID="Address" runat="server"></asp:HiddenField>
        <asp:HiddenField ID="PropertyLat" runat="server"></asp:HiddenField>
        <asp:HiddenField ID="PropertyLng" runat="server"></asp:HiddenField>
        <table style="width: 100%;">
            <tr align="center">
                <td style="width: 50%;">
                    <h2>Map</h2>
                    <div id="map" style="width: 325px; height: 300px;"></div>
                </td>
                <td style="width: 50%;">
                    <h2>Street View</h2>
                    <div id="streetview" style="width: 325px; height: 300px;"></div>
                    <div id="nostreetview" style="width: 325px; height: 300px; display:none;">
                        This road does not support Street View 
                    </div>
                </td>
            </tr>
        </table>
        
        <p/>
        
        <h2>Walk Score</h2>
        <script type="text/javascript">
            var ws_address = document.getElementById('<%=Address.ClientID%>').value;
            var ws_width = "625";
            var ws_height = "1000"; 
        </script> 
        <script type="text/javascript" src="http://www.walkscore.com/tile/show-tile.php?wsid=cd8d883301213718bfaaa11ecb9381fa"></script> 
        
        <p/>
        
        <h2>Walk Score</h2>
        <table style="width: 100%;">
        <tr align="center">
        <td style="width: 30%;">
            <div id="hs01" class="hotspot">Restaurants</div><br/>
            <div id="hs02" class="hotspot">Post Offices</div><br/>
            <div id="hs03" class="hotspot">Coffee Shops</div><br/>
            <div id="hs04" class="hotspot">Gas Stations</div><br/>
            <div id="hs05" class="hotspot">Movie Theaters</div><br/>
            <div id="hs06" class="hotspot">Parks</div><br/>
            <div id="hs07" class="hotspot">Libraries</div><br/>
            <div id="hs08" class="hotspot">Golf Courses</div><br/>
            <div id="hs09" class="hotspot">Shopping Malls</div><br/>
            <div id="hs10" class="hotspot">Hospitals</div><br/>
            <div id="hs11" class="hotspot">Schools</div><br/>
            <div id="hs12" class="hotspot">Grocery Stores</div><br/>
            <div id="hs13" class="hotspot">Video Game Stores</div><br/>
            <div id="hs14" class="hotspot">Bars</div><br/>
            <div id="hs15" class="hotspot">Tanning Salons</div><br/>
            <div id="hs16" class="hotspot">Banks</div><br/>
            <div id="hs17" class="hotspot">Supermarkets</div><br/> 
        </td>
        <td style="width: 70%;">
        <div id="search_map"></div>
        </td>
        </tr>
        </table>

        <script type="text/javascript">
            var hotspots = [
            { element: document.getElementById("hs01"), query: "restaurants" },
            { element: document.getElementById("hs02"), query: "post office" },
            { element: document.getElementById("hs03"), query: "coffee" },
            { element: document.getElementById("hs04"), query: "gas station" },
            { element: document.getElementById("hs05"), query: "movie theater" },
            { element: document.getElementById("hs06"), query: "parks" },
            { element: document.getElementById("hs07"), query: "library" },
            { element: document.getElementById("hs08"), query: "golf course" },
            { element: document.getElementById("hs09"), query: "shopping malls" },
            { element: document.getElementById("hs10"), query: "hospital" },
            { element: document.getElementById("hs11"), query: "schools" },
            { element: document.getElementById("hs12"), query: "grocery stores" },
            { element: document.getElementById("hs13"), query: "video game stores" },
            { element: document.getElementById("hs14"), query: "bars" },
            { element: document.getElementById("hs15"), query: "tanning salons" },
            { element: document.getElementById("hs16"), query: "financial banks" },
            { element: document.getElementById("hs17"), query: "supermarkets" }
            ];

            var mapSearchControl;
     
            var map = null;
            var zoom = 17;
            var streetviewClient = null;
            var streetviewPano = null;
            var marker = null;

            var property_address = document.getElementById('<%=Address.ClientID%>').value;
            var property_lat = document.getElementById('<%=PropertyLat.ClientID%>').value;
            var property_lng = document.getElementById('<%=PropertyLng.ClientID%>').value;
            var icon = new GIcon(G_DEFAULT_ICON);
            icon.image = "../images/BlueGMarker.png";
                           
            function load() {
                if (GBrowserIsCompatible()) {
                    
                    //google map with the search bar
                    var search_map_options = {
                        googleBarOptions: {
                            showOnLoad: true,
                            linkTarget: G_GOOGLEBAR_LINK_TARGET_BLANK,
                            resultList: G_GOOGLEBAR_RESULT_LIST_SUPPRESS
                        }
                    };
                    new GMap2(document.getElementById("search_map"), search_map_options);
                    map = new GMap2(document.getElementById("map"), search_map_options);
                    map.addControl(new GSmallZoomControl3D());
                    map.setMapType(G_HYBRID_MAP);
                    //map.enableGoogleBar();

                    streetviewClient = new GStreetviewClient();
                    streetviewPano = new GStreetviewPanorama(document.getElementById("streetview"), {});
                    //GEvent.addListener(streetview, "error", handleNoFlash);
                   
                    var property_loc = new GLatLng(property_lat, property_lng);
                    map.setCenter(property_loc, zoom);

                    var marker_options = { icon: icon };
                    marker = new GMarker(property_loc, marker_options);
                    map.addOverlay(marker);
                    GEvent.addListener(marker, "click", function() {
                    this.openInfoWindowHtml(address + "\n");
                    });
                    
                    streetviewClient.getNearestPanorama(marker.getLatLng(), showPanoData);


                    var container = document.getElementById("search_map");
                    mapSearchControl = new GSmapSearchControl(container,
                                     property_address,
                                     { title: "",
                                         url: "",
                                         idleMapZoom: GSmapSearchControl.ACTIVE_MAP_ZOOM - 1,
                                         hotspots: hotspots,
                                         showResultList: GSmapSearchControl.DEFAULT_RESULT_LIST
                                     }
                                    );
                
                }
                else {
                    alert("Browser not compatible");
                }
            }
            function showPanoData(panoData) {
                if (panoData.code != 200) {
                    document.getElementById("streetview").style.display = "none";
                    document.getElementById("streetview").style.height = "0px";
                    document.getElementById("streetview").style.width = "0px";
                    document.getElementById("nostreetview").style.display = "";
                    return;
                }
                var angle = computeAngle(marker.getLatLng(), panoData.location.latlng);
                streetviewPano.setLocationAndPOV(panoData.location.latlng, { yaw: angle, pitch: -10 });
            }
            function computeAngle(endLatLng, startLatLng) {
                var DEGREE_PER_RADIAN = 57.2957795;
                var RADIAN_PER_DEGREE = 0.017453;

                var dlat = endLatLng.lat() - startLatLng.lat();
                var dlng = endLatLng.lng() - startLatLng.lng();
                
                var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat)
                 * DEGREE_PER_RADIAN;
                return wrapAngle(yaw);
            }
            function wrapAngle(angle) {
                if (angle >= 360) {
                    angle -= 360;
                } else if (angle < 0) {
                    angle += 360;
                }
                return angle;
            };


            function handleNoFlash(errorCode) {
                /*if (errorCode == FLASH_UNAVAILABLE) {
                alert("Error: Flash doesn't appear to be supported by your browser");
                return;
                }*/
            }
            var browser = navigator.appName;
            if (browser == "Microsoft Internet Explorer") {
                document.body.onload = load;
            }
            else {
                document.body.onload = load();
            }
            document.body.onunload = GUnload;
           
        </script>	
    </div>
</asp:Content>
